<!-- XX列表页 -->
<template>
  <BaseCrud
    :cols="cols"
    :fields="fields"
    :fetch="GetUserList"
    :extraBtns="['add']"
    @extraBtns="onExtraBtns"

    :operateBtns="['edit', 'delete']"
    @operateBtns="onOperateBtns"

  >
  </BaseCrud>
</template>
<script lang="ts" setup>
import { GetUserList, DeleteUserList } from "@/api-mock";
import { FormField } from "@/core/components/form/_types";
import { TableCol } from "@/core/components/table/_types";
import { handleBtnNext } from "@/utils";
import AddEdit from "./AddEdit.vue";
import { BtnName } from "@/core/components/BaseBtn/_types";
import { CommonObj, FinallyNext } from "@/core/_types";
import { usePopup } from "@/hooks";

const { openPopup } = usePopup();
const fields: FormField[] = [
  {
    "label": "备注",
    "type": "input",
    "attrs": {
      "maxlength": 50
    },
    "prop": "remark"
  },
  {
    "prop": "status",
    "label": "启用状态",
    "type": "input",
    "attrs": {
      "options": "D_EnableStatus"
    }
  },
  {
    "label": "电话",
    "attrs": {
      "maxlength": 11
    },
    "prop": "phone",
    "type": "input"
  }
];
const cols: TableCol[] = [
  {
    "label": "备注信息",
    "minWidth": 140,
    "type": "BaseText",
    "prop": "remark"
  },
  {
    "prop": "status",
    "label": "启用状态",
    "minWidth": 80,
    "type": "BaseTag",
    "attrs": {
      "name": "D_EnableStatus"
    }
  }
];
// 处理额外按钮点击
function onExtraBtns(name: BtnName, next: FinallyNext) {
  handleBtnNext(
    {
      add: () => handleAddEdit(null, next),
    },
    name
  );
}
// 处理操作按钮点击
function onOperateBtns(name: BtnName, row: CommonObj, next: FinallyNext) {
  const { id } = row;
  handleBtnNext(
    {
      edit: () => handleAddEdit(row, next),
      delete: () => DeleteUserList({ id }).then(() => next()),
    },
    name
  );
}
// 新增/编辑
function handleAddEdit(row: CommonObj | null, next: FinallyNext) {
  openPopup(row ? "编辑" : "新增", [AddEdit, { data: row, refreshList: next }]);
}
</script>
<style lang="scss" scoped></style>